<template>
  <div class="container">
    <div class="header">header</div>
    <div class="main">
      <div class="left-menu">left-menu</div>
      <div class="right-main">
        <lzc-echarts></lzc-echarts>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
import lzcEcharts from "@/page/test-echarts/echarts-demo.vue";
export default {
  components: {
    lzcEcharts,
  },
  data() {
    return {};
  },
  created() {},
};
</script>
<style scoped>
div {
  border: 1px solid #000;
}
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.header {
  height: 60px;
  background-color: cornflowerblue;
}
.main {
  height: calc(100vh - 60px);
  display: flex;
}
.left-menu {
  width: 200px;
  height: 100%;
}
.right-main {
  flex: 1;
  height: 100%;
}
</style>
